<template>
  <div class="app-container">
    <div class="container">
      <div class="main page page-list">

        <div>
          <el-card
            shadow="never"
            v-loading="sumLoading"
            class="m-b-8"
          >
            <div>
              <div>
                <span class="panelTitle">累计数据</span>
              </div>
              <div class="contentBox">
                <div class="sumBox">

                  <div class="sumItem">
                    <span>累计总付款支付宝数量</span><span class="text-bold-18 text-success">{{stat.sumData.totalPaidAlipayUserCount}}</span>
                  </div>
                  <div class="sumItem">
                    <span>累计超过500万金额支付宝数量</span><span class="text-bold-18 text-success text-click" @click="showVeryMerchantDialog = true">{{stat.sumData.totalVeryAlipayUserCount}}</span>
                  </div>

                  <div class="sumItem">
                    <span>累计收款支付宝数量</span><span class="text-bold-18 text-success">{{stat.sumData.totalReceiveAlipayCount}}</span>
                  </div>
                  <div class="sumItem">
                  </div>
                </div>
              </div>
            </div>
            <div class="m-t-24">
              <div>
                <span class="panelTitle">实时数据</span>
              </div>
              <div class="contentBox">
                <div class="sumBox">
                  <div class="sumItem">
                    <span>实时金额</span><span class="text-bold-18 text-success">{{ stat.todayStat.successAmount}}</span>
                  </div>
                  <div class="sumItem">
                    <span>付款支付宝数量</span><span class="text-bold-18 text-success">{{ stat.todayStat.paidAlipayUserCount}} </span>
                  </div>
                  <div class="sumItem">
                    <span>支付成功率</span><span class="text-bold-18 text-success">{{ stat.todayStat.transSuccessRate }} %</span>
                  </div>
                  <div class="sumItem">
                    <span>收款支付宝数量</span><span class="text-bold-18 text-success">{{ stat.todayStat.receiveAlipayCount}}</span>
                  </div>
                  <div class="sumItem">
                    <span>单笔超过500金额笔数</span><span class="text-bold-18 text-success text-click" @click="showSingleVeryMerchantDialog = true;merchantIds = stat.todayStat.singleVeryMerchantIds">{{ stat.todayStat.singleVeryCount}}</span>
                  </div>
                   <div class="sumItem">
                  </div>
                   <div class="sumItem">
                  </div>
                   <div class="sumItem">
                  </div>
                </div>
              </div>

            </div>
            <div class="m-t-24">
              <div>
                <span class="panelTitle">昨日数据</span>
              </div>
              <div class="contentBox">
                <div class="sumBox">
                  <div class="sumItem">
                    <span>实时金额</span><span class="text-bold-18 text-success">{{ stat.yesterdayStat.successAmount}}</span>
                  </div>
                  <div class="sumItem">
                    <span>付款支付宝数量</span><span class="text-bold-18 text-success">{{ stat.yesterdayStat.paidAlipayUserCount}} </span>
                  </div>
                  <div class="sumItem">
                    <span>支付成功率</span><span class="text-bold-18 text-success">{{ stat.yesterdayStat.transSuccessRate }} %</span>
                  </div>
                  <div class="sumItem">
                    <span>收款支付宝数量</span><span class="text-bold-18 text-success">{{ stat.yesterdayStat.receiveAlipayCount}}</span>
                  </div>
                  <div class="sumItem">
                    <span>单笔超过500金额笔数</span><span class="text-bold-18 text-success text-click" @click="showSingleVeryMerchantDialog = true;merchantIds = stat.yesterdayStat.singleVeryMerchantIds">{{ stat.yesterdayStat.singleVeryCount}}</span>
                  </div>
                   <div class="sumItem">
                  </div>
                   <div class="sumItem">
                  </div>
                   <div class="sumItem">
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </div>

      </div>
    </div>

     <el-dialog
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      title="累计大金额支付宝所属商户编号"
      class="dialog-action"
      width="50%"
      :visible.sync="showVeryMerchantDialog"
    >
      {{ stat.sumData.veryMerchantIds }}

      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
         @click="showVeryMerchantDialog = false"
        >确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      title="单笔超过500金额所属商户编号"
      class="dialog-action"
      width="50%"
      :visible.sync="showSingleVeryMerchantDialog"
    >
      {{ merchantIds }}

      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
         @click="showSingleVeryMerchantDialog = false"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import { sumTransStat } from "@/api/business";

export default {
  data() {
    return {
      startTime: "",
      endTime: "",
      list: [],
      loading: false,
      curData: null,
      form: {
        day: "",
      },
      stat: {
        sumData: {},
        todayStat: {},
        yesterdayStat: {}
      }, //合计数据
      sumLoading: false,

      showVeryMerchantDialog: false,
      showSingleVeryMerchantDialog: false,

      merchantIds: ""
    };
  },
  components: {},
  methods: {
    search() {
      this.sumTransStat();
    },

    sumTransStat() {
      this.sumLoading = true;
      console.log(this.form);
      sumTransStat(this.form)
        .then((data) => {
          this.stat = data.data;
          this.sumLoading = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //修改分页
    handleSizeChange(val) {},
    //修改页面
    handleCurrentChange(val) {
      this.getList(val);
    },
    init() {
      this.search();
    },

    // 跳转到充值中心下的充值记录
    jumpToVoucherCenter() {
      this.$router.push({ path: "/chargeCenter/chargeRecord?from=daily" });
    },
  },
  mounted() {
    this.init();
    this.form.day = new Date();
  },
};
</script>

<style lang="scss" scoped>
.panelTitle {
  font-weight: bold;
  &:before {
    content: "|";
    margin-right: 6px;
    color: #409eff;
  }
}
.contentBox {
  background: #eeeeee;
  margin-top: 16px;
  .sumBox {
    display: grid;
    grid-template-columns: repeat(4, 25%);
    padding: 2px;
    .sumItem {
      background: #fff;
      border: 1px solid #eeeeee;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      padding: 10px;
      height: 100px;
      box-sizing: border-box;
    }
  }
}
</style>
